<template>
  <div class="application">
    <div id="container">
      <div class="clearfix">
        <div class="content_l">
          <dl class="c_collections">
            <dt>
              <h1>
                <em></em>我收藏的职位
              </h1>
            </dt>
            <dd>
              <form id="collectionsForm">
                <ul class="reset my_collections">
                  <li v-for="(item,index) in starList" :key="index">
                    <!-- <a :title="item.job.job_title ||item.job.position.position_title"  href="javascript:void(0)">
                      <img :alt="item.job.job_title ||item.job.position.position_title" src="style/images/ff808081441c19bf01441f9a47190b3a.png" />
                    </a>-->
                    <div class="co_item">
                      <h2
                        :title="item.job.job_title ||item.job.position.position_title"
                        @click="toWhere('positionDetail',{job_id:item.job_id})"
                      >
                        <a href="javascript:void(0)">
                          <em>{{item.job.job_title ||item.job.position.position_title}}</em>
                          <span>{{item.job.salary_unit == 4?'面议':(item.job.salary_min ?(item.job.salary_min === item.job.salary_max ? item.job.salary_min : item.job.salary_min + '-' + item.job.salary_max):item.job.salary)}}{{salary_unit[item.job.salary_unit]}}</span>
                        </a>
                      </h2>
                      <span
                        class="co_time"
                        @click="toWhere('positionDetail',{job_id:item.job_id})"
                      >发布时间：{{item.job.time_update}}</span>
                      <div class="co_cate" @click="toWhere('positionDetail',{job_id:item.job_id})">
                        {{(item.job.job_experience_min == item.job.job_experience_max && item.job.job_experience_max== 0)?'经验不限':(item.job.job_experience_min+'-'+item.job.job_experience_max+'年')}}
                        /{{educationArr[Number(item.job.job_education)]}}
                      </div>
                      <!-- <span class="co_youhuo c7">出勤福利</span> -->
                      <!-- <a class="collection_link" href="javascript:void(0)">投个简历</a> -->
                      <i></i>
                      <a
                        class="collectionCancel collection_link collected"
                        href="javascript:void(0)"
                        @click="cancelStar(item.job_id)"
                      >取消收藏</a>
                    </div>
                  </li>
                </ul>
                <Empty v-if="starList.length == 0" content="您暂未投递职位~"></Empty>
                <el-pagination
                  v-if="starList.length"
                  background
                  layout="prev, pager, next"
                  :total="pageTotal"
                  :page-size="pageSize"
                  @current-change="changePage"
                ></el-pagination>
              </form>
            </dd>
          </dl>
        </div>
        <div class="content_r">
          <div class="mycenterR" id="myInfo">
            <h2>个人中心</h2>
            <a href="javascript:void(0)" @click="toWhere('application')">投递记录</a>
            <br />
            <!-- <a target="_blank" href="subscribe.html">我订阅的职位</a> -->
          </div>
          <!--end #myInfo-->
          <div class="greybg qrcode mt20">
            <img
              width="242"
              height="242"
              alt="半城直聘二维码"
              v-if="platform == 'weapp'"
              :src='locationHref + "/saas/get-mp-qr"'
            />
            <img
              width="242"
              height="242"
              alt="半城直聘二维码"
              v-else
              :src="'https://api.qrserver.com/v1/create-qr-code/?data=http://'+locationHref+'/pc&amp;size=100x100'"
            />
            <span class="c7">扫描半城直聘二维码，微信轻松搜工作</span>
          </div>
        </div>
      </div>
    </div>
    <!-- end #body -->
  </div>
</template>

<script>
import { JobStarList, Star } from "~/api/allRequest.js";
import Empty from "~/components/empty/empty";
import config from "~/config";
export default {
  name: "collection",
  data() {
    return {
      formItem: {
        page: 0
      },
      salary_unit: ["", "元/月", "元/日", "元/时"],
      educationArr: [
        "学历不限",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ],
      starList: [],
      pageTotal: 0,
      pageSize: 5,
      locationHref: config.hostSaas,
      platform: localStorage.getItem("platform")
    };
  },
  components: { Empty },
  beforeCreate() {},
  created() {
    this.$store.dispatch("changeTabName", "collection");
  },
  beforeMount() {},
  mounted() {
    this.getData();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods: {
    getData() {
      this.formItem.page = ++this.formItem.page;
      JobStarList(this.formItem)
        .then(result => {
          let { total, per_page, current_page, data } = result;
          this.pageTotal = total;
          this.pageSize = per_page;
          this.formItem.page = current_page;
          this.starList = data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    toWhere(name, json) {
      if (json) {
        this.$router.push({ name, query: json });
      } else {
        this.$router.push({ name });
      }
    },
    changePage(e) {
      this.formItem.page = e - 1;
      this.getData();
    },
    cancelStar(job_id) {
      Star({ job_id, action: 0 })
        .then(result => {
          this.$message.success("取消收藏成功");
          setTimeout(() => {
            this.page = --this.page;
            this.getData();
          }, 1000);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped lang="less">
@import "./../../../public/less/main.less";
</style>
